import { FlowComponent, JSXElement, Show } from 'solid-js'
import S from './Dialog.module.styl'
import { fixed } from './View'
import { Transition } from 'solid-transition-group'

export type Content = undefined | {
  title: string
  ele: JSXElement
}

type Dialog = FlowComponent<{
  onCancel?: () => void
  title?: string
}, Content>

const Dialog: Dialog = prop => {
  return <Transition
    appear={true}
    enterClass={S.hide}
    exitToClass={S.hide}
    onEnter={e => (e as HTMLElement).focus()}
  >
    <Show when={prop.children} keyed>{({ title, ele }) =>
      <div
        tabIndex={-1}
        class={`${fixed} ${S.view}`}
        onClick={e => e.target == e.currentTarget && prop.onCancel?.()}
        onKeyDown={e => e.key == 'Escape' && prop.onCancel?.()}
      >
        <div class={S.content}>
          <h1 class={S.title}>{title}</h1>
          {ele}
        </div>
      </div>
    }</Show>
  </Transition>
}

export default Dialog
